<template>
  <div ref="pie" style="width:100%; height:100%;"></div>
</template>

<script>
import * as echarts from "echarts";
    export default {
        name: "",
        props: {// 接受父组件的值
          detailData:{
            type:Object,
          },
        },
        data(){
            return{
              chart: null,
              seriesData1: {},
              bqFlag:'',
              hbFlag:'',
              tbFlag:'',


            }
        },
        watch: {
          detailData: {
            handler(val, old) {
              this.seriesData1 = this.detailData;
              this.initChart();
              //console.log(val+"监听数据");
            },
            deep: true,
          },
        },
        mounted() {
          setTimeout(() => {
            this.$nextTick(() => {
              this.initChart();
            });
          }, 500);

        },
        created() {
          this.seriesData1 = this.detailData;
        },
        methods:{
          initChart(){
            let ref = this.$refs.pie;
            //console.log(this.seriesData1.hbfz)
            if(this.seriesData1.je < 0){
              this.bqFlag = 'bottom'
            }else if(this.seriesData1.je > 0){
              this.bqFlag = 'top'
            }

            if(this.seriesData1.hbfz < 0){
              this.hbFlag = 'bottom'
            }else if(this.seriesData1.hbfz > 0){
              this.hbFlag = 'top'
            }

            if(this.seriesData1.tbfz < 0){
              this.tbFlag = 'bottom'
            }else if(this.seriesData1.tbfz > 0){
              this.tbFlag = 'top'
            }

            if (ref && ref !== undefined) {
              this.chart = echarts.init(ref);
              var option;
              option = {
                color: ["#4D94F1"],
                grid: {
                  left: "10%",
                  right: "10%",
                  top: "10%",
                  bottom: "10%",
                  containLabel: true,
                },
                xAxis: [
                  {
                    type: "category",
                    data: ["本期", "环比", "同比"],
                    // data: echelonchart.xAxis,
                    boundaryGap: true,
                    axisLine: {
                      show: true,
                    },
                    axisLabel: {
                      interval: 0,
                      margin: 16,
                      color: "#666666",
                      fontSize: 12,
                    },
                    axisTick: {
                      show: false,
                    },
                  },
                ],
                yAxis: [
                  {
                    type: "value",
                    show: false,
                  },
                ],
                series: [
                  {
                    name: "部门奖金总额",
                    type: "bar",
                    barWidth: "25%",
                    // data: echelonchart.yAxis,
                    data: [
                      // 配置单独的孩子所在的那一项的具体样式
                      {
                        value: this.seriesData1.je,
                        label: {
                          show: true,
                          position: this.bqFlag,
                          color: "#5470c6",
                          formatter({ value }) {
                            return `${value}元`;
                          },
                        },
                        itemStyle: {
                          color: "#5470c6",
                          borderWidth: 2,
                          borderType: "solid",
                          borderColor: "#5470c6",
                        },
                      },
                      {
                        value: this.seriesData1.hbfz,
                        label: {
                          show: true,
                          position: this.hbFlag,
                          color: "#5470c6",
                          formatter({ value }) {
                            return `${value}元`;
                          },
                        },
                        itemStyle: {
                          color: "#5470c6",
                          borderWidth: 2,
                          borderType: "solid",
                          borderColor: "#5470c6",
                          borderRadius: [0, 0, 50, 50],
                        },
                      },
                      {
                        value: this.seriesData1.tbfz,
                        label: {
                          show: true,
                          position: this.tbFlag,
                          color: "#5470c6",
                          formatter({ value }) {
                            return `${value}元`;
                          },
                        },
                        itemStyle: {
                          color: "#5470c6",
                          borderWidth: 2,
                          borderType: "solid",
                          borderColor: "#5470c6",
                        },
                      },
                      6,
                      0,
                    ],

                    // radius: ["85%", "100%"],
                    avoidLabelOverlap: false,
                    hoverAnimation: false,

                    // 统一设置其他的 未单独设置样式的 数据柱状图样式
                    itemStyle: {
                      borderRadius: [50, 50, 0, 0],
                      // 通过描边模拟 数据为0时 也显示一点点高度
                      borderWidth: 2,
                      borderType: "solid",
                      borderColor: "#4D94F1",
                    },
                    label: {
                      show: true,
                      position: "top",
                      color: "#4D94F1",
                      formatter({ value }) {
                        return `${value}元`;
                      },
                    },

                    labelLine: {
                      show: false,
                    },
                  },
                ],

              }
              option && this.chart.setOption(option);

            }
          },
        },
    };
</script>

<style scoped>
/deep/[data-v-37c029ad] .el-form-item--small.el-form-item{margin-top: 0!important;}
/deep/.el-avatar{background: #fff!important;display: flex;justify-content: center}
.userBoxShadow{
  border: 4px solid #fff;
  -webkit-box-shadow: 5px 0px 10px rgba(150, 150, 192, 0.5);
  box-shadow: 5px 0px 10px rgba(150, 150, 192, 0.5);
  margin-right: 25px;border-radius: 50%;
}
</style>
